<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- NAVBAR -->
    <link href="./deps/material-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="./deps/all.min.css">
    <link rel="stylesheet" href="./deps/index.css">
    <script src="./index.js"></script>
    <title>Zoom Clone - Home</title>
</head>
<body>
    
     <!-- NAVBAR TOP -->
       <div class="grid-padre-navbar-top">
        <div class="center-navbar-top">
            <div class="grid-navegacion-top-icons">
                <div class="mr-icons">
                    <div class="img-center">
                        <span class="material-icons md-blue">
                            home
                        </span>
                    </div>
                   <p class="title-navegacion-active"> Home</p>
                </div>
                <div class="mr-icons">
                    <div class="img-center">
                        <span class="material-icons md-gray">
                            chat_bubble
                        </span>
                    </div>
                   <p class="title-navegacion">Chat</p>
                </div>
                <div class="mr-icons">
                    <div class="img-center">
                        <span class="material-icons md-gray">
                            access_time
                        </span> 
                        </div>
                   <p class="title-navegacion">Meetings</p>
                </div>
                <div class="mr-icons">
                    <div class="img-center">
                        <span class="material-icons md-gray">
                            portrait
                        </span>
                    </div>
                   <p class="title-navegacion">Contacts</p>
                </div>
            </div>
           </div>
    
           <div class="end-bar-navegacion-top" style="margin-top: 0px;">
                <br />
                <div class="input-group-login sombreado-input">
                  <div class="input-group-prepend-login">
                    <span class="input-group-text fondo-icon">
                        <span class="material-icons">
                            search
                        </span>
                    </span>
                  </div>
                  <input
                    type="text"
                    class="border-0-login form-control-login input-border-none"
                    placeholder="Search"
                    aria-label="Username"
                  />
                </div>
          
               <div class="box-user" style="margin-bottom: 5px;">
                   <p style="margin-top: 5px;">
                       E
                   </p>
               </div>
           </div>
       </div>
    
       <!-- BOX CENTER -->
        <div class="box-zoom">
            <div class="grid-zoom">
                <div class="grid-icons" style="margin-top: 190px;">
                    <div id="new-meeting" class="box-video" style="background-color: #FF742E;" >
                        <div class="img-center">
                       
                            <span class="material-icons md-55">
                                videocam
                            </span>
                        </div>
                        <br><br>
                        <p align="center" class="icon-title">New Meeting</p>

                    </div>
                            
                    <div id="join" class="box-video" style="background-color: #0E71EB;">
                        <div class="img-center">
                            <span class="material-icons md-55">
                                add_box
                            </span>
                            </div>
                        <br><br>
                        <p align="center" class="icon-title">Join</p>
                    </div>
                    
    
                    <div class="box-video" style="background-color: #0E71EB; margin-top: 50px;">
                        <div class="img-center">
                            <i class="fas fa-calendar material-icons md-55"></i>
                        </div>
                        <br><br>
                        <p align="center" class="icon-title">Schedule</p>
                    </div>
                            
    
                    <div class="box-video" style="background-color: #0E71EB; margin-top: 50px;">
                        <div class="img-center">
                            <span class="material-icons md-55">
                                screen_share
                            </span>
                        </div>
                        <br><br>
                        <p align="center" class="icon-title">Share Screen</p>
                    </div>
    
    
                </div>
                <div class="card-time" style="margin-top: 100px;">
                    <div class="box-time">
                        <br><br>
                        <p>
                        <p class="title-clock">15:18</p>
                            <span class="title-date">Friday, August 21 , 2020</span>
                        </p>
                        <br>
                    </div>
                    <div class="box-time-white">
                        <br><br><br><br><br><br>
                        <p align="center">
                            <span >
                                No upcoming meetings today
                            </span>
                        </p>
                    </div>
                </div>
            </div>
    
            <!-- NAVBAR FOOTER -->
    
            <div class="navbar-zoom fixed-bottom grid-navigation">
                <div >
                    <div class="img-center">
                        <span class="material-icons md-blue">
                            home
                        </span>
                    </div>
                   <p class="title-navegacion-active"> Home</p>
                </div>
                <div>
                    <div class="img-center">
                        <span class="material-icons md-gray">
                            chat_bubble
                        </span>
                    </div>
                   <p class="title-navegacion">Chat</p>
                </div>
                <div>
                    <div class="img-center">
                        <span class="material-icons md-gray">
                            access_time
                        </span> 
                    </div>
                   <p class="title-navegacion">Meetings</p>
                </div>
                <div>
                    <div class="img-center">
                        <span class="material-icons md-gray">
                            portrait
                        </span>
                    </div>
                   <p class="title-navegacion">Contacts</p>
                </div>
            </div>
        </div>
</body>
</html>